<template> 
	<view class="container">
	        <view class="content">
	            <view class="module">
	                <view class="module-header">
	                    <view class="title-indicator"></view>
	                    <text class="module-title">设备管理</text>
	                </view>
	                <view class="function-grid">
	                    <view class="function-card" v-for="(item, index) in functions" :key="index" 
	                          @click="handleClick(item.name)"
	                          :style="{ backgroundColor: item.color }">
	                        <view class="card-content">
	                            <image class="function-icon" :src="item.icon"></image>
	                            <text class="function-name">{{ item.name }}</text>
	                        </view>
	                        <view class="hover-mask"></view>
	                    </view>
	                </view>
	            </view>
	
	            <pveVue/>
	        </view>
	    </view>
</template>

<script>
	import pveVue from '../components/pve.vue';
export default {

	   onLoad() {
	      // 监听 WebSocket 消息事件
	      uni.$on('websocketMessageReceived', this.handleWebSocketMessage);
	    },
	  
	    onUnload() {
	      // 移除监听，防止内存泄漏
	      uni.$off('websocketMessageReceived', this.handleWebSocketMessage);
	    },
	data() {
	        return {
	            functions: [
	                { name: '设备维修', icon: '/static/images/icon-repair.png', color: '#F0F7FF' },
	                { name: '设备维护', icon: '/static/images/icon-maintenance.png', color: '#FFF7E6' },
	                { name: '设备信息', icon: '/static/images/icon-info.png', color: '#F5F6FA' }
	            ]
	        }
	    },
	components: {
			pveVue
		},
	methods: {
		// 处理 WebSocket 消息
		handleWebSocketMessage(message) {
		  // 显示模态对话框
		  uni.showModal({
		    title: '系统通知',
		    content: message,
		    confirmText: '立即查看',
		    showCancel: false, // 不显示取消按钮
		    confirmColor: '#4080FF', // 设置确认按钮颜色
		    success: (res) => {
		      if (res.confirm) {
		        // 跳转到指定页面（示例跳转到维护页面）
		        uni.navigateTo({
		          url: '/pages/equipment/maintain/maintain'
		        });
		      }
		    },
		    fail: (err) => {
		      console.error('弹窗显示失败:', err);
		    }
		  });
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		handleClick(moduleName) {
			let url = '';
			if(moduleName == '设备维修'){
				url = '/pages/equipment/maintain/maintain';
			}else if(moduleName == '设备维护'){
				url ='/pages/equipment/equMaintenance/equMaintenance';
			}else if(moduleName == '设备信息'){
				url ='/pages/equipment/equList/index';
			}
			uni.navigateTo({ url }); 
		}, 
		handleNews(moduleNews) { 
			uni.showToast({
				title: `点击了：${moduleNews}`, 
				icon: 'none', 
			}); 
			let url = '/pages/manage/index'; 
			uni.navigateTo({ url }); 
		}, 
		
	}
}
</script>

<style  scoped>
/* 基础样式重置 */
page {
    height: 100%;
    background: #F8FAFC;
}

/* 容器布局 */
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #F8FAFC 0%, #F0F4F9 100%);
}

.content {
    flex: 1;
    padding: 32rpx 32rpx 128rpx;
    overflow-y: auto;
}

/* 模块标题样式 */
.module-header {
    display: flex;
    align-items: center;
    margin-bottom: 48rpx;
    position: relative;
    padding-left: 24rpx;
}

.title-indicator {
    width: 8rpx;
    height: 36rpx;
    background: #4080FF;
    border-radius: 4rpx;
    position: absolute;
    left: 0;
}

.module-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #1D2129;
    letter-spacing: 0.5px;
    margin-left: 24rpx;
}

/* 功能网格布局 */
.function-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24rpx;
}

.function-card {
    height: 240rpx;
    border-radius: 24rpx;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8rpx 24rpx rgba(64, 128, 255, 0.08);
}

.function-card:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(64, 128, 255, 0.1);
}

.card-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32rpx;
    z-index: 2;
}

/* 图标样式 */
.function-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 24rpx;
    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.08));
}

/* 文字样式 */
.function-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #1D2129;
    text-align: center;
    line-height: 1.4;
}

/* 悬停遮罩效果 */
.hover-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.6) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.function-card:active .hover-mask {
    opacity: 1;
}

/* 底部安全区域 */
.safe-area-bottom {
    height: env(safe-area-inset-bottom);
    background: #FFF;
}
</style>
